<template>
    <div class="setComponent">
        <div class="form-item">
            <label>增加步骤</label>
            <el-button type="primary" round size="mini" @click="addClick">增加</el-button>
        </div>
        <div class="form-item">
            <label>删除步骤</label>
            <el-button :disabled="obj.imgTextBox.length<=2" type="danger" round size="mini" @click="removeClick">删除</el-button>
        </div>

        <div class="form-item">
            <label>步骤名称</label>
            <el-button size="mini" @click="titleClick('title')">编辑</el-button>
        </div>
        <div>
            <div class="form-item">
                <label>步骤描述</label>
                <el-button size="mini" @click="titleClick('desc')">编辑</el-button>
            </div>
        </div>
        <div class="form-item">
            <label>步骤图标</label>
            <el-button size="small" type="primary" @click="uploadClick">选取</el-button>
        </div>
        <div class="form-item">
            <label>图标大小</label>
            <el-input-number v-model="obj.fontSize"/>
        </div>
    </div>
</template>
<script>
import { animateOptions } from '@/utils/animateOptions'
import { columnOptions } from '@/utils/selectOptions'
export default {
    name: 'ThreeColumns',
    props: {
        obj: {
            type: Object

        }
    },
    data() {
        return {
            options: animateOptions,
            columnOptions: columnOptions,
            directionOptions: [
                {
                    label: '横向',
                    value: 'horizontal'
                },
                {
                    label: '纵向',
                    value: 'vertical'
                }
            ]
        }
    },
    methods: {
        butClick(msg) {
            this.$emit('butClick', msg)
        },
        uploadClick() {
            this.$emit('uploadClick', this.obj)
        },
        addClick() {
            this.obj.imgTextBox.push(JSON.parse(JSON.stringify(this.obj.imgTextBox[0])))
        },
        removeClick() {
            this.obj.imgTextBox.pop()
        },
        titleClick(type) {
            this.$emit('titleClick', [this.obj, type])
        }
    }
}
</script>
<style lang="scss">

</style>

